<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane :label="$t('产品信息表')" name="product">
      <fund-product-info-form ref="fundProductInfoForm" @cancel="cancel" />
    </el-tab-pane>
    <el-tab-pane :label="$t('产品运行监测表')" name="indicator">
      <fund-product-indicator-form ref="fundProductIndicatorForm" @cancel="cancel" />
    </el-tab-pane>
    <el-tab-pane :label="$t('项目情况表')" name="dealStatus">
      <fund-project-status-list ref="fundProjectStatusList" @cancel="cancel" />
    </el-tab-pane>
    <el-tab-pane :label="$t('债券投资监测报表')" name="investBond">
      <fund-bond-invest-form ref="fundBondInvestForm" @cancel="cancel" />
    </el-tab-pane>
    <el-tab-pane :label="$t('持有违约债券信息表')" name="defaultBond">
      <fund-default-bond-list ref="fundDefaultBondList" @cancel="cancel" />
    </el-tab-pane>
    <el-tab-pane :label="$t('持有风险债券信息表')" name="riskBond">
      <fund-risk-bond-list ref="fundRiskBondList" @cancel="cancel" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import fundProductIndicatorForm from './fundProductIndicatorForm.vue'
import fundProjectStatusList from './fundProjectStatusList.vue'
import fundProductInfoForm from './fundProductInfoForm.vue'
import fundBondInvestForm from './fundBondInvestForm.vue'
import fundDefaultBondList from './fundDefaultBondList.vue'
import fundRiskBondList from './fundRiskBondList.vue'
import { getFundProductOperationMonitor } from '@/api/fund/operation/fundProductOperationMonitor.js'
export default {
  components: {
    fundProductIndicatorForm,
    fundProjectStatusList,
    fundProductInfoForm,
    fundBondInvestForm,
    fundDefaultBondList,
    fundRiskBondList
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 产品运行监测表格数据
      fundProductOperationMonitorList: [],
      // 弹出层标题
      title: '产品运行监测表',
      // 是否显示弹出层
      formOpen: false,
      indicatorFormOpen: false,
      // 表单参数
      form: {},
      // tabs 选择值
      activeName: undefined,
      // 是否隐藏其它按钮
      otherBtnHide: false,
      btnHide: false
    }
  },
  mounted() {
    this.$bus.$emit('async_done')
  },
  methods: {
    init(data) {
      console.log('指标填写-init')
      // 获取这条数据的流程状态
      this.loading = true
      getFundProductOperationMonitor(data.id).then(response => {
        if ((response.data.actStatus === 'W' || response.data.actStatus === 'D') && data.actModifyFrom !== 'true') {
          // 启动或完成的流程按钮状态关闭
          response.data.processBtn = false
        } else {
          // 未启动或终止流程按钮状态开启
          response.data.processBtn = true
          if (data.actModifyFrom !== 'true') {
            // 如果从流程中打开则不展示取消按钮
            response.data.cancelShow = true
          } else {
            response.data.cancelShow = false
          }
        }
        this.editIndicatorHandle(response.data)
      })
    },
    // 填写指标
    editIndicatorHandle(row) {
      this.indicatorFormOpen = true
      this.activeName = 'product'
      row['btnHide'] = this.btnHide
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.fundProductIndicatorForm.init(row)
        this.$refs.fundProjectStatusList.init(row)
        this.$refs.fundProductInfoForm.init(row)
        this.$refs.fundBondInvestForm.init(row)
        this.$refs.fundDefaultBondList.init(row)
        this.$refs.fundRiskBondList.init(row)
      })
    },
    handleClick(tab) {
      switch (tab.name) {
        case 'indicator':
          break
        case 'dealStatus':
          break
        case 'product':
          break
      }
    },
    cancel() {
      this.$parent.$parent.indicatorFormOpen = false
    }
  }
}
</script>

<style scoped>

</style>
